<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>S.web系统登陆</title>
		<link rel="icon" href="/img/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="/layui/css/layui.css" media="all"/>
		<link rel="stylesheet" href="/css/login.css" media="all"/>
		<style>
			/* 覆盖原框架样式 */
			.layui-elem-quote{background-color: inherit!important;}
			.layui-input, .layui-select, .layui-textarea{background-color: inherit; padding-left: 30px;}
		</style>
	</head>
	<body>
		<!-- Head -->
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-sm12 layui-col-md12 sw_mar_01">
					<blockquote class="layui-elem-quote">S.web后台登陆界面</blockquote>
				</div>
			</div>
		</div>
		<!-- Head End -->

		<!-- Carousel -->
		<div class="layui-row">
			<div class="layui-col-sm12 layui-col-md12">
				<div class="layui-carousel sw_login_height" id="sw_login" lay-filter="sw_login">
					<div carousel-item="">
						<div>
							<div class="sw_login_cont"></div>
						</div>
						<div>
							<img src="/img/carousel/01.jpg" />
						</div>
						<div>
							<div class="background">
								<span></span><span></span><span></span>
								<span></span><span></span><span></span>
								<span></span><span></span><span></span>
								<span></span><span></span><span></span>
							</div>
						</div>
						<div>
							<img src="/img/carousel/03.jpg" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Carousel End -->

		<!-- Footer -->
		<div class="layui-row">
			<div class="layui-col-sm12 layui-col-md12 sw_center sw_mar_01">
				© 2020 - S.web系统后台登陆界面 || 工信部 浙ICP备18051592号-1
			</div>
		</div>
		<!-- Footer End -->



		<!-- LoginForm -->
		<div class="sw_info_main">
			<fieldset class="layui-elem-field layui-field-title sw_mar_02">
				<legend>欢迎登陆 - S.web后台管理平台</legend>
			</fieldset>
			<div class="layui-row layui-col-space15">
				<form class="layui-form sw_pad_01" action="">
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="text" name="username" lay-verify="required|username" autocomplete="off" placeholder="账号" class="layui-input">
							<i class="layui-icon layui-icon-username sw_info_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<input type="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码" class="layui-input">
							<i class="layui-icon layui-icon-password sw_info_icon"></i>
						</div>
					</div>
					<div class="layui-col-sm12 layui-col-md12">
						<div class="layui-form-item">
							<div style="display: flex; justify-content: center;">
								<div class="qq-div" style="text-align: center; margin-right: 20px;" onclick="toLogin('qq')">
									<div class="div-circle icon-qq">
										<img class="qq-blue" src="/img/icon-login-QQ-blue.png" alt width="30" style="display: inline;">
										<img class="qq-white" src="/img/icon-login-QQ-white.png" alt width="30" style="display: none;">
									</div>
								</div>
								<div class="wx-div" style="text-align: center" onclick="toLogin('qq')">
									<div class="div-circle icon-wx">
										<img class="wx-green" src="/img/icon-login-WX-green.png" alt width="30" style="display: inline;">
										<img class="wx-white" src="/img/icon-login-WX-white.png" alt width="30" style="display: none;">
									</div>
								</div>
							</div>
						</div>
					</div>
<!--					<div class="layui-col-sm12 layui-col-md12">-->
<!--						<div class="layui-row">-->
<!--							<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">-->
<!--								<div class="layui-form-item">-->
<!--									<input type="text" name="verCode" id="ver_code" lay-verify="required|verCodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">-->
<!--									<i class="layui-icon layui-icon-vercode sw_info_icon"></i>-->
<!--								</div>-->
<!--							</div>-->
<!--							<div class="layui-col-xs4 layui-col-sm4 layui-col-md4">-->
<!--								<div class="sw_info_verCode swVerCode" onclick="swVerCode()"></div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
					<div class="layui-col-sm12 layui-col-md12">
						<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">立即登录</button>
					</div>
				</form>
			</div>
		</div>
		<!-- LoginForm End -->


		<!-- Jquery Js -->
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<!-- Layui Js -->
		<script type="text/javascript" src="/layui/layui.js"></script>
		<!-- Jqarticle Js -->
		<script type="text/javascript" src="/assembly/jqarticle/jparticle.min.js"></script>
		<!-- ZylVerificationCode Js-->
		<script type="text/javascript" src="/assembly/verificationCode/verificationCode.js"></script>
		<script src="/js/axios.js"></script>
		<script>
			layui.use(['carousel', 'form'], function(){
				let carousel = layui.carousel
				,form = layui.form;

				let fromUrl = '[[${from}]]'
                console.log(fromUrl)

				//自定义验证规则
				form.verify({
					username: function(value){
						if(value.length < 5){
							return '账号至少得5个字符';
						}
					}
					,pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']
					,verCodes: function(value){
						//获取验证码
						const swVerCode = $(".swVerCode").html();
						if(value!=swVerCode){
							return '验证码错误（区分大小写）';
						}
					}
					,content: function(value){
						layedit.sync(editIndex);
					}
				});

				//监听提交
				form.on('submit(login)', function(data){
					axios.post("/auth/login?username="+data.field.username+"&password="+data.field.password).then(function (response) {
						if (response.data.success){
							layer.alert('登录成功！')
							//跳转原地址
							location.href = fromUrl;
						} else{
							layer.alert('登录失败！')
						}
					})

					return false;
				});


				//设置轮播主体高度
				let sw_login_height = $(window).height()/1.3;
				let sw_car_height = $(".sw_login_height").css("cssText","height:" + sw_login_height + "px!important");


				//Login轮播主体
			 	carousel.render({
					elem: '#sw_login'//指向容器选择器
					,width: '100%' //设置容器宽度
					,height:'sw_car_height'
					,arrow: 'always' //始终显示箭头
					,anim: 'fade' //切换动画方式
					,autoplay: true //是否自动切换false true
					,arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
					,indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
					,interval: '5000' //自动切换时间:单位：ms（毫秒）
				});

				//监听轮播--案例暂未使用
				carousel.on('change(sw_login)', function(obj){
					let loginCarousel = obj.index;
				});

				//粒子线条
				$(".sw_login_cont").jParticle({
					background: "rgba(0,0,0,0)",//背景颜色
					color: "#fff",//粒子和连线的颜色
					particlesNumber:100,//粒子数量
					//disableLinks:true,//禁止粒子间连线
					//disableMouse:true,//禁止粒子间连线(鼠标)
					particle: {
					    minSize: 1,//最小粒子
					    maxSize: 3,//最大粒子
					    speed: 30,//粒子的动画速度
					 }
				});
			});

			$(function(){
				$(".icon-wx").hover(function () {
					$('.wx-green').css({"display":"none"});
					$('.wx-white').css({"display":"inline"});
					layer.tips("微信登录",$(this), {
						tips: [1, '#00BD17'],
						maxWidth: 360,
						time:0
					});
				},function () {
					//不用再单独写鼠标离开事件了
					$('.wx-green').css({"display":"inline"});
					$('.wx-white').css({"display":"none"});
					layer.closeAll('tips');
				});
				$(".icon-qq").hover(function () {
					$('.qq-blue').css({"display":"none"});
					$('.qq-white').css({"display":"inline"});
					layer.tips("QQ登录",$(this), {
						tips: [1, '#50A8EB'],
						maxWidth: 360,
						time:0
					});
				},function () {
					$('.qq-blue').css({"display":"inline"});
					$('.qq-white').css({"display":"none"});
					layer.closeAll('tips');
				});
			});
			function toLogin(type) {
				layer.alert('暂不支持！')
			};
		</script>
	</body>
</html>
